<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {ref} from "vue";
const option = ref({
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'item',
    formatter: function (params) {
      return params.name + " " + params.data.num;
    }
  },
  grid: {
    top: '1em',
    left: '1em',
    right: '1em',
    bottom: '1em',
    containLabel: true,

  },
  // top: 10,
  legend: {
    data: ['原材料采购总金额', '已入库总金额', '已对账金额', '已开发票总额', '已付款总额'],
    borderRadius: 0,
    icon: 'rect',

    itemStyle: {
      borderWidth: 0,
      borderJoin: 'solid',
      borderRadius: 0,
      borderCap: 'butt'
    },
    textStyle: {
      color: '#ffffff'
    },
    bottom: 10,
  },
  series: [
    {
      name: 'Funnel',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.name + " " + params.data.num;
        }
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderWidth: 0
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 20, num: 5450, name: '已付款总额' },
        { value: 40, num: 468.18, name: '已开发票总额' },
        { value: 60, num: 17540, name: '已对账金额' },
        { value: 80, num: 24560, name: '已入库总金额' },
        { value: 100, num: 35806, name: '原材料采购总金额' }
      ]
    }
  ]
});

</script>

<template>
  <common-box>
    <div class="chart-header">
      对账漏斗
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="option"></v-chart>
    </div>
  </common-box>
</template>

<style scoped>
.chart-header {
  text-align: left;
  font-size: 0.5em;
  padding: 0.2em 0 0.2em 1em;
}
</style>